<template>
  <div class="app-container">
    <el-row style="padding-bottom: 10px">
      <el-button v-if="isDev" type="primary" icon="el-icon-plus" @click="showAdd">新增</el-button>
    </el-row>
    <el-row>
      <el-table ref="tableData" :data="tableData" border row-key="id" :default-expand-all="false" highlight-current-row :tree-props="{ children: 'children', hasChildren: false }" @row-click="rowClick">
        <el-table-column align="center" prop="name" label="菜单名称" />
        <el-table-column align="center" prop="code" label="菜单编号" width="100px " />
        <el-table-column align="center" prop="type" label="菜单类型" width="80px">
          <template #default="{ row }">{{ row.type === 1 ? '模块' : '菜单' }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="70px" align="center">
          <template #default="{ row }">
            <el-switch v-model="row.status" :disabled="row.children && row.children.some(el => el.status === 1)" :active-value="1" :inactive-value="0" @change="submitApi(row)" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sort" label="菜单排序" width="80px" />
        <el-table-column align="center" prop="icon" label="菜单图标" width="80px">
          <template #default="{ row }"><i class="iconfont" :class="row.icon" /></template>
        </el-table-column>
        <el-table-column align="center" prop="path" label="路由地址" />
        <el-table-column align="center" prop="redirect" label="重定向地址" />
        <el-table-column align="center" prop="componentName" label="组件名称" />
        <el-table-column align="center" prop="componentPath" label="组件地址" width="90px" />
        <el-table-column label="操作" width="135px" align="center">
          <template #default="{ row }">
            <el-button-group>
              <el-button @click="showEdit(row)">编辑</el-button>
              <el-button v-if="isDev" type="danger" @click="deleteRow(row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-drawer ref="drawer" title="新增/编辑" :visible.sync="dialogVisible" direction="rtl" custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <el-row style="margin: 0 55px 0 10px" :gutter="10">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item v-if="isDev" label="上级菜单" prop="parentId">
              <tree-select ref="treeSelect" style="width: 100%" :props="{ value: 'id', label: 'name', children: 'children' }" :options="treeList" clearable :disabled="false" :accordion="true" :value="ruleForm.parentId" :search-key="'name'" @getNode="getValue($event)" />
            </el-form-item>
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model.trim="ruleForm.name" />
            </el-form-item>
            <el-form-item v-if="isDev" label="菜单编号" prop="code">
              <el-input v-model.trim="ruleForm.code" />
            </el-form-item>
            <el-form-item v-if="isDev" label="所属类型" prop="type">
              <el-select v-model="ruleForm.type">
                <el-option label="功能模块" :value="1" />
                <el-option label="菜单" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="菜单排序" prop="sort">
              <el-input-number v-model="ruleForm.sort" :precision="0" />
            </el-form-item>
            <el-form-item v-if="isDev" label="菜单状态" prop="status">
              <el-select v-model="ruleForm.status">
                <el-option label="启用" :value="1" />
                <el-option label="停用" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="isDev" label="菜单图标" prop="icon">
              <el-input v-model.trim="ruleForm.icon" />
            </el-form-item>
            <el-form-item v-if="isDev || ruleForm.isLink === 1" label="菜单路由" prop="path">
              <el-input v-model.trim="ruleForm.path" />
            </el-form-item>
            <el-form-item v-if="isDev" label="重定向地址" prop="redirect">
              <el-input v-model.trim="ruleForm.redirect" />
            </el-form-item>
            <el-form-item v-if="isDev" label="是否外链" prop="status">
              <el-select
                v-model="ruleForm.isLink"
                @change="
                  value => {
                    rules.componentName[0].required = value !== 1
                    rules.componentPath[0].required = value !== 1
                  }
                "
              >
                <el-option label="请选择" value="" />
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="isDev" label="组件名称" prop="componentName">
              <el-input v-model.trim="ruleForm.componentName" />
            </el-form-item>
            <el-form-item v-if="isDev" label="组件地址" prop="componentPath">
              <el-input v-model.trim="ruleForm.componentPath" />
            </el-form-item>
          </el-form>
        </el-row>
        <div class="demo-drawer__footer">
          <el-button size="medium" @click="dialogVisible = false">取 消</el-button>
          <el-button size="medium" type="primary" :loading="loading" @click="sbumitForm('ruleForm')">{{ loading ? '提交中 ...' : '提 交' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import treeSelect from '@/components/TreeSelect'
export default {
  components: { treeSelect },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      ruleForm: {
        sort: 1,
        status: 1,
        isLink: 1,
        type: 2
      },
      treeList: [],
      rules: {
        name: [{ required: true }],
        code: [{ required: true }],
        type: [{ required: true }],
        componentName: [{ required: true }],
        componentPath: [{ required: true }]
      },
      loading: false,
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getTableInfo()
  },
  methods: {
    /**
     * @description: query table data
     * @return {*}
     */
    async getTableInfo() {
      const res = await this.$axios.get('/platform/menu/listPlatform')
      console.log(res)
      if (res?.data.code === 200) {
        this.tableData = res.data.data
        this.treeList = this.tableData
      }
    },
    /**
     * @description: row click
     * @param {*} data
     * @return {*}
     */
    rowClick(data) {
      this.rowInfo = Object.assign({}, data)
    },
    /**
     * @description: add data
     * @return {*}
     */
    showAdd() {
      this.dialogVisible = true
      // this.ruleForm.parentId = this.rowInfo.id
      delete this.ruleForm.id
    },
    /**
     * @description: data modify
     * @param {*} data
     * @return {*}
     */
    showEdit(data) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.ruleForm = Object.assign({}, data)
      })
    },
    /**
     * @description: get selected parent data
     * @param {*} value
     * @return {*}
     */
    getValue(value) {
      this.ruleForm.parentId = value ? value.id : null
    },
    /**
     * @description: delete data
     * @param {*} data
     * @return {*}
     */
    async deleteRow(data) {
      const res = await this.$axios.get(`/platform/menu/delete?id=${data.id}`)
      if (res?.data.code === 200) {
        this.$notify.success('删除成功！')
        this.getTableInfo()
      }
    },
    /**
     * @description: submit form data
     * @param {*} formName
     * @return {*}
     */
    sbumitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.remark = this.ruleForm.name
          this.loading = true
          const method = this.ruleForm.id ? '/platform/menu/updateById' : '/platform/menu/save'
          this.$axios.post(method, this.ruleForm).then(res => {
            if (res?.data.code === 200 && res.data.data) {
              this.$notify.success('保存成功！')
              this.loading = false
              if (!this.isDev) {
                this.dialogVisible = false
              }
              this.getTableInfo()
            }
          })
        }
      })
    },
    submitApi(row) {
      this.$axios.post('/platform/menu/updateById', row).then(res => {
        if (res?.data.code === 200 && res.data.data) {
          this.$notify.success('保存成功！')
          this.getTableInfo()
        }
      })
    }
  }
}
</script>
<style lang='scss' >
.demo-drawer {
  .demo-drawer__footer {
    display: flex;
    margin: 10px 10px 0 10px;
    .el-button {
      flex: 1;
    }
  }
}
</style>
